<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>微信授权页面演示</title>
    <style>
      body {
        font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
        background-color: #f5f5f5;
      }
      .container {
        background: white;
        padding: 30px;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      }
      .demo-section {
        margin: 20px 0;
        padding: 20px;
        border: 1px solid #e0e0e0;
        border-radius: 5px;
      }
      .code-block {
        background: #f8f9fa;
        padding: 15px;
        border-radius: 5px;
        font-family: "Courier New", monospace;
        font-size: 14px;
        overflow-x: auto;
      }
      .step {
        margin: 15px 0;
        padding: 10px;
        background: #e3f2fd;
        border-radius: 5px;
      }
      .warning {
        background: #fff3e0;
        border-left: 4px solid #ff9800;
        padding: 10px 15px;
        margin: 15px 0;
      }
      button {
        background: #07c160;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;
        margin: 5px;
      }
      button:hover {
        background: #06ae56;
      }
      button.secondary {
        background: #2196f3;
      }
      button.secondary:hover {
        background: #1976d2;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>微信扫一扫授权页面演示</h1>

      <div class="demo-section">
        <h2>📋 使用说明</h2>
        <p>这个演示页面展示了微信授权页面的工作原理。在实际使用时，您需要：</p>

        <div class="step">
          <strong>步骤 1:</strong> 配置微信公众号的网页授权域名
        </div>
        <div class="step">
          <strong>步骤 2:</strong> 修改代码中的AppID和AppSecret
        </div>
        <div class="step"><strong>步骤 3:</strong> 部署到HTTPS服务器</div>

        <div class="warning">
          <strong>注意:</strong>
          由于安全限制，此演示页面无法直接进行微信授权测试。
          您需要将文件部署到配置了网页授权域名的HTTPS服务器上才能正常使用。
        </div>
      </div>

      <div class="demo-section">
        <h2>🔗 快速链接</h2>
        <p>
          <button onclick="window.open('/auth', '_blank')">查看授权页面</button>
          <button
            class="secondary"
            onclick="window.open('/api/info', '_blank')"
          >
            查看API信息
          </button>
          <button
            class="secondary"
            onclick="window.open('/api/health', '_blank')"
          >
            健康检查
          </button>
        </p>
      </div>

      <div class="demo-section">
        <h2>📝 核心代码示例</h2>

        <h3>前端授权逻辑</h3>
        <div class="code-block">
          // 检查URL中的code参数<br />
          const urlParams = new URLSearchParams(window.location.search);<br />
          const code = urlParams.get('code');<br />
          <br />
          if (!code) {<br />
          &nbsp;&nbsp;// 发起微信授权请求<br />
          &nbsp;&nbsp;const appid = 'YOUR_APPID';<br />
          &nbsp;&nbsp;const redirectUri =
          encodeURIComponent(window.location.href);<br />
          &nbsp;&nbsp;window.location.href =
          `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_base#wechat_redirect`;<br />
          } else {<br />
          &nbsp;&nbsp;// 使用code换取openid<br />
          &nbsp;&nbsp;fetch(`/api/auth/openid?code=${code}`)<br />
          &nbsp;&nbsp;&nbsp;&nbsp;.then(response => response.json())<br />
          &nbsp;&nbsp;&nbsp;&nbsp;.then(data => {<br />
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log('用户openid:',
          data.openid);<br />
          &nbsp;&nbsp;&nbsp;&nbsp;});<br />
          }
        </div>

        <h3>后端API处理</h3>
        <div class="code-block">
          // 使用code换取openid<br />
          const tokenUrl =
          `https://api.weixin.qq.com/sns/oauth2/access_token?appid=${appid}&secret=${secret}&code=${code}&grant_type=authorization_code`;<br />
          <br />
          const tokenResponse = await axios.get(tokenUrl);<br />
          const tokenData = tokenResponse.data;<br />
          <br />
          // 返回openid给前端<br />
          res.json({<br />
          &nbsp;&nbsp;openid: tokenData.openid,<br />
          &nbsp;&nbsp;access_token: tokenData.access_token,<br />
          &nbsp;&nbsp;message: '获取openid成功'<br />
          });
        </div>
      </div>

      <div class="demo-section">
        <h2>🚀 开始使用</h2>
        <ol>
          <li>下载所有文件到您的项目目录</li>
          <li>按照README.md中的说明配置微信公众号</li>
          <li>修改代码中的AppID和AppSecret</li>
          <li>部署到支持HTTPS的服务器</li>
          <li>测试微信扫一扫功能</li>
        </ol>

        <p>
          <strong>技术支持:</strong> 如有问题，请参考README.md中的常见问题部分。
        </p>
      </div>
    </div>

    <script>
      // 演示页面的简单交互功能
      console.log("微信授权演示页面已加载");
      console.log(
        "当前目录文件:",
        [
          "wechat-redirect.html - 授权页面",
          "api-example.js - 后端API",
          "README.md - 使用文档",
          "test-demo.html - 演示页面",
        ].join("\n")
      );
    </script>
  </body>
</html>
